<template>
<view class="container">
      <view class="list-block">
          <view class="list-ul">
              <view class="li">
                  <view class="li-title">订单单号</view>
                  <view class="li-content">{{order.order_sn}}</view>
              </view>
              <view class="li">
                  <view class="li-title">取消进度</view>
                  <view class="li-content" v-if="order.pay_status < 3">正在处理</view>
                  <view class="li-content" v-else-if="order.pay_status == 3">处理完成</view>
                  <view class="li-content" v-else>审核失败</view>
              </view>
              <view class="li">
                  <view class="li-title">订单总额</view>
                  <view class="li-content">￥{{order.total_amount}}</view>
              </view>
              <view class="li">
                  <view class="li-title">进度详细</view>
                  <view class="li-content" v-if="order.pay_status < 3">亲爱的客户，我们正在为您处理中，请耐心等待。 </view>
                  <view class="li-content" v-else-if="order.pay_status == 3">亲爱的客户,您的退款订单已完成。{{order.admin_note}} </view>
                  <view class="li-content" v-else>亲爱的客户,您的退款订单审核失败。原因：{{$order.admin_note}}</view>
              </view>
          </view>
          <view class="progress-img">
              <image v-if="order.pay_status == 1" src="/static/images/progress-bar-1.png"></image>
              <image v-else-if="order.pay_status == 2" src="/static/images/progress-bar-1.png"></image>
              <image v-else-if="order.pay_status == 3 || order.pay_status == 4" src="/static/images/progress-bar-3.png"></image>
          </view>
           
      </view>
      <view class="list-block">
          <view class="content-title">申请单详细信息</view>
          <view class="list-ul">
              <view class="li">
                  <view class="li-title">取消原因</view>
                  <view class="li-content">{{order.cancel_reason}}</view>
              </view>
              <view class="li">
                  <view class="li-title">联系方式</view>
                  <view class="li-content">{{order.mobile}}</view>
              </view>
              <view class="li">
                  <view class="li-title">支付明细</view>
                  <view class="li-content">
                      <view>支付总金额 : <text style="color:#e23435">￥{{order.total_amount}}</text></view>
                      <view>余额支付 : <text style="color:#e23435">￥{{order.user_money}}</text></view>
                      <view>积分抵扣 : <text style="color:#e23435">￥{{order.integral_money}}</text></view>
                      <view>优惠券 : ￥{{order.coupon_price}}</view>
                      <view>其他支付 : ￥{{order.order_amount}}</view>
                  </view>
              </view>
          </view>
      </view>
      <view class="list-block">
          <view class="content-title" style="border-bottom: 1px solid #f3f3f3;padding-bottom:20rpx;">退款明细状态详解</view>
          <view class="foot-text">
            <view>1、已退：商城已完成退款处理，实际退款时间以到账时间为准。</view>
            <view>2、待退：订单含有未退款项，待系统处理，请您耐心等待。</view>
            <view>3、未退：商城劵发生拆分是不予返还、商城劵、手机红包请您联系客服处理。</view>
          </view>
      </view>
</view>
</template>

<script>
var app = getApp();
var setting = app.globalData.setting;
var request = app.globalData.request;

export default {
  data() {
    return {
      url: setting.url,
      resourceUrl: setting.resourceUrl,
      order: null,
      orderId: ""
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    var that = this;
    this.setData({
      orderId: options.order_id
    });
    this.requestCancelOrder();
  },
  methods: {
    /** 已付款未发货的取消订单 */
    requestCancelOrder: function () {
      var that = this;
      request.post('/api/order/cancel_order_info', {
        data: {
          order_id: that.orderId
        },
        success: function (res) {
          that.setData({
            order: res.data.result
          });
        }
      });
    }
  }
};
</script>
<style>
.list-block {
  width: 100%;
  height: auto;
  background: #fff;
  margin-bottom: 20rpx;
}

.list-ul {
  width: 90%;
  height: auto;
  margin: 20rpx auto;
  border: 1px solid #f3f3f3;
  border-top: none
}

.li {
  width: 100%;
  text-align: center;
  border-top: 1px solid #f3f3f3;
  font-size: 12pt;
  height: 50rpx;
  line-height: 50rpx;
}

.li:last-child {
  height: auto;
}


.li-title{
  width: 200rpx;
  color: #333;
  
  float: left;
}
.li-content{
  margin-left:200rpx;
  color: #666;
  border-left: 1px solid #f3f3f3;
  text-align: start;
  padding-left:10rpx;
}

.content-title {
  width: 100%;
  height: 50rpx;
  line-height: 50rpx;
  color: #333;
  text-align: center;
  margin-top: 30rpx;
}

.foot-text{
  color: #666;
  padding: 50rpx 20rpx;
  font-size: 12pt
}

.progress-img {
  height: 68rpx;
  width: 556rpx;
  display: block;
  margin: 30rpx auto
}

.progress-img image{
  width: 100%;
  height: 100%;
}
</style>